<template>
<div class="page">
    <router-view></router-view>
    <div class="banner" v-if="type">
        <img class="banner-img" :src="coverImg2" alt="">
    </div>
    <div class="banner" v-else>
        <img class="banner-img" :src="details.coverImg" alt="">
    </div>
    <div class="tit" ref="tit" v-text="details.name"></div>
    <div class="tag-box">
        <span class="item" v-for="(item,index) in details.tagList" :key="index">
            {{item.tagName}}
        </span>
    </div>
    <cell-item icon="el-icon-location">
        <div class="content flex-one top">{{details.addr}}</div>
    </cell-item>
    <cell-item>
        <i class="el-icon-location l" slot="icon"></i>
        <div class="top">活动时间{{details.startTime}}</div>
        <div class="desc">预计活动时长{{details.duration}}小时</div>
    </cell-item>
    <div class="detail">
        <div v-html="details.detail"></div>
    </div>
    <div class="join-list" v-for="(item,index) in details.participantList" :key="index">
        <img :src="item.headIcon" style="width:50px;height:50px;" alt="">
    </div> 
    <a href="javscript:;" @click="changeType">按钮</a>
</div>
</template>

<script>
import coverImg from "@/assets/logo.png";
import coverImg2 from "@/assets/empty-icon.png";
import cellItem from './cellItem'
export default {
    data() {
        return {
            type: 1,
            type2: 9,
            type3: 10,
            coverImg2,
            arry:[{
                aa:"",
            }],
            details: {
                id: "02befd09bcdd4e75843a2c1b85259356",
                startTime: "2018-08-04T05:50:24.000+0000",
                endTime: null,
                status: "1",
                duration: 0,
                templetId: "1",
                deadlineRegistration: "2018-08-04T05:50:24.000+0000",
                organizerId: "1",
                organizerName: "组织者昵称",
                perCapitaPrice: "100.00",
                name: "活动模板",
                amount: 0,
                type: 1,
                peopleNum: 10,
                enrolment: 10,
                addr: "1111",
                createDate: "2018-08-04 13:51:45.0",
                coverImg: coverImg,
                detail: "<div style='color:#900'>我是详情，<br/>丰富的活动介绍...</div>",
                teamTime: "2018-08-10 10:02:59.0",
                tagList: [{
                        activityTempletId: "1",
                        tagName: "有趣"
                    },
                    {
                        activityTempletId: "1",
                        tagName: "火爆"
                    }
                ],
                participantList: [{
                        headIcon: "http://139.224.116.255:8670/images/20180809/92ee7c46a69047e7846ebaa074e1a350.jpg",
                        nickname: "王小新",
                        sex: "2",
                        mobile: "18695789610",
                        amount: 0,
                        createDate: "2018-08-10 10:02:59",
                        participantsNum: 10,
                        finishTime: null
                    },
                    {
                        headIcon: "http://139.224.116.255:8670/images/20180809/92ee7c46a69047e7846ebaa074e1a350.jpg",
                        nickname: "王小新",
                        sex: "2",
                        mobile: "18695789610",
                        amount: 0,
                        createDate: "2018-08-10 10:02:59",
                        participantsNum: 10,
                        finishTime: null
                    }
                ]
            }
        };
    },
    components: {
        cellItem
    },
    created() {
        this.$nextTick(()=>{

        })
        console.log(this)
        this.type = false
        console.log('aa')
    },
    computed: {
        typeAdd() {
            return this.type2 + 10
        },
        tyepMin() {
            return this.type2 - 5
        },
        demo: {
            get: function () {
                console.log('get')
                return this.type3 
            },
            set: function (v) {
              console.log(v)
                this.type2 = v
            }

        }
    },
    watch: {

    },
    mounted() {
        console.log(this.$refs.tit)
    },
    methods: {
        changeType() {
            this.type = !this.type
        },
        changeDemo(){
          this.demo=this.type2+1
        }
    }
};
</script>

<style lang="scss">
.page {
    .banner-img {
        width: 100%;
        height: 200px;
    }
    .tit {
        padding: 15px 10px;
        font-size: 18px;
    }
    .tag-box {
        .item {}
    }
}

.cells {
    .cell {
        &:last-child {
            border-bottom: 0;
        }
    }
}

.cell {
    border-bottom: 1px solid #eee;
    padding: 10px 15px;
    .l {
        font-size: 24px;
        color: yellow;
    }
    .top {
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .content {
        margin: 0 10px;
    }
    .desc {
        color: #888;
        font-size: 12px;
    }
}

.df-center {
    display: flex;
    align-items: center;
    .flex-one {
        flex: 1;
        overflow: hidden;
    }
}
</style>
